
<template>
    <div>
        <div class="main">
            <div class="denglu">
                <Form class="box" ref="forms" :model="formInline" :rules="ruleInline" inline>
                    <div class="inputItem">
                        <div class="userimg user"></div>
                        <FormItem prop="username">
                            <Input type="text" v-model="formInline.username" placeholder="请输入用户名"></Input>
                        </FormItem>
                    </div>

                    <div class="inputItem">
                        <div class="userimg pass"></div>
                        <FormItem prop="newPassword">
                            <Input
                                type="password"
                                v-model="formInline.newPassword"
                                placeholder="请输入您的新密码密码"
                            ></Input>
                        </FormItem>
                    </div>
                    <div class="inputItem">
                        <div class="userimg code"></div>
                        <FormItem prop="phone">
                            <Input type="text" v-model="formInline.phone" placeholder="请输入手机号">
                            </Input>
                        </FormItem>
                    </div>
                    <div class="button" @click="edit('forms')">登录</div>
                </Form>
            </div>
        </div>
    </div>
</template>

<script>
import { post } from "../../http/http";
export default {
    data() {
        return {
            formInline: {
                username: "",
                newPassword: "",
                phone: ""
            },
            ruleInline: {
                username: [
                    {
                        required: true,
                        message: "请输入用户名",
                        trigger: "blur"
                    }
                ],
                newPassword: [
                    {
                        required: true,
                        message: "请输入密码",
                        trigger: "blur"
                    },
                    {
                        type: "string",
                        min: 6,
                        message: "密码长度最少6位",
                        trigger: "blur"
                    }
                ],
                phone: [
                    {
                        required: true,
                        message: "请输入手机号",
                        trigger: "blur"
                    }
                ]
            }
        };
    },
    created(){
        localStorage.setItem(this.formInline.username)
    },
    methods: {
        edit(name) {
            this.$refs[name].validate(async valid => {
                if (valid) {
                    const data = await post("retrieve", {
                        account: this.formInline.username,
                        newPassword: this.formInline.newPassword,
                        phone: this.formInline.phone
                    }).then(data => data);
                    if (data) {
                        if (data.code == 200) {
                            this.$Message.success("验证成功 正在跳转转登录页!");
                            this.$router.push({ name: `login` });
                        } else if (data.code == -100) {
                            this.$Message.error("账号与手机号不符!");
                        }
                    } else {
                        this.$Message.error("账号或密码错误");
                    }
                } else {
                    this.$Message.error("请依据提示填写信息!");
                }
            });
        }
    }
};
</script>

<style lang="less" >
.box {
}
.main {
    background: url("../../../public/images/index/indexbj2.png") no-repeat;
    background-size: cover;
    height: 100%;
    .button {
        width: 100%;
        height: 50px;
        text-align: center;
        line-height: 50px;
        border-radius: 3px;
        background: #ebf5ff;
        margin-top: 20px;
        margin-bottom: 10px;
        box-shadow: 0px 6px 13px rgba(27, 139, 255, 20%);
        cursor: pointer;
    }
    .bj {
        background: url("../../../public/images/index/indexbj1.png") no-repeat;
        background-size: cover;
        height: 100%;
    }

    .userimg {
        margin-right: 10px;
        width: 40px;
        height: 40px;
        float: left;
        &.user {
            background: url("../../../public/images/index/user.png") no-repeat;
            background-size: 100%;
            background-position: center;
        }
        &.pass{
            background: url("../../../public/images/index/password.png")
                no-repeat;
            background-size: 100%;
            background-position: center;
        }
        &.code {
            background: url("../../../public/images/index/360.png") no-repeat;
            background-size: 100%;
            background-position: center;
        }
    }
    .inputItem {
        border-bottom: 1px solid #e8e8e8;
        overflow: hidden;
        padding: 10px 0px;
        .ivu-form-item .ivu-form-item-required {
            width: 100%;
            border-bottom: 1px solid black;
            float: left;
        }
        .ivu-form-item {
            margin: 0px;
            margin-top: 3px;
        }

        .ivu-input {
            border: 0px;
            &:focus {
                box-shadow: none;
            }
        }
        .ivu-form-item-error-tip {
            font-size: 10px;
            position: absolute;
            top: 70%;
            left: 4px;
        }
    }

    .ivu-form-item-error .ivu-input {
        border: 0px;
    }
    .ivu-input-wrapper {
        width: 280px;
    }
    .denglu {
        position: absolute;
        height: 400px;
        width: 400px;
        padding: 25px;
        box-shadow: 0px 0px 5px rgba(0, 140, 255, 40%);
        top: 50%;
        left: 25%;
        -webkit-transform: translate(-50%, -50%);
        -moz-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        .tap {
            height: 40px;
            border-bottom: 1px solid #dcdee2;
            color: #2d8cf0;
            font-weight: bold;
            font-size: 20px;
            margin-bottom: 10px;
            &cur {
                border-bottom: 1px solid #2d8cf0;
            }
        }
    }
}
</style>